<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>Tiendalia</title>
        <link rel='stylesheet' type='text/css' href='resources/css/style.css' />
        <link rel='stylesheet' type='text/css' href='resources/css/primefaces.css' />
        <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>
    </h:head>
    <h:body>
        <ui:composition template="template.xhtml">
            <ui:define name="content">
                <p:messages id="editUserMessages" autoUpdate="true"/>
                <h:form id="mainProductsForm">
                    <p:dataGrid styleClass="productsGrid" var="product" value="#{mainBean.products}" columns="3"
                                rows="12">
                        <p:panel header="#{product.name}" style="text-align:center">
                            <h:panelGrid columns="1" style="width:100%">
                                <h:outputText value="#{product.price}">
                                    <f:convertNumber currencySymbol="€" type="currency"/>
                                </h:outputText>
                                <p:commandButton ajax="false" value="Ver" action="product.xhtml">
                                    <f:param name="product" value="#{product.id}"/>
                                </p:commandButton>
                            </h:panelGrid>
                        </p:panel>
                    </p:dataGrid>
                </h:form>
            </ui:define>
        </ui:composition>
    </h:body>
</html>